.card {
  background: var(--theme-card-background);
  border-radius: 24px;
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px var(--theme-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;

  &.bordered {
    border: 1px solid rgba(var(--theme-primary-light-rgb, 255, 182, 193), 0.2);
  }

  &.hoverable {
    cursor: pointer;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 25px 70px var(--theme-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
      border-color: rgba(var(--theme-primary-light-rgb, 255, 182, 193), 0.3);
    }
  }
}

.header {
  padding: 2.5rem 2.5rem 1.5rem;
  border-bottom: 1px solid rgba(var(--theme-primary-light-rgb, 255, 182, 193), 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, var(--theme-card-background, rgba(255, 240, 245, 0.3)) 100%);
}

.title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--theme-primary-light);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.2);
  text-align: center;
}

.subtitle {
  font-size: 1rem;
  color: var(--theme-text-secondary);
  text-align: center;
  opacity: 0.9;
}

.content {
  padding: 2.5rem;
}

.footer {
  padding: 1.5rem 2.5rem;
  border-top: 1px solid rgba(var(--theme-primary-light-rgb, 255, 182, 193), 0.1);
  background: linear-gradient(135deg, var(--theme-card-background, rgba(255, 240, 245, 0.3)) 0%, rgba(255, 255, 255, 0.5) 100%);
}

/* 主题特定颜色变量 */
.theme-pink {
  --theme-primary-light-rgb: 255, 182, 193;
  --theme-card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 245, 0.9) 100%);
}

.theme-blue {
  --theme-primary-light-rgb: 135, 206, 235;
  --theme-card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 255, 0.9) 100%);
}

.theme-purple {
  --theme-primary-light-rgb: 221, 160, 221;
  --theme-card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.9) 100%);
}